<template>
  <!--报价-->
  <div class="quo">
    <!--报价单查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change="initData(currPage,pageSize,filterValue,vagueValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option v-for="group in filterOptions" :key="group.value"
                         :label="group.label" :value="group.value">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" style="width: 150px"></el-input>
      <el-select v-model="vagueValue" @change="initData(currPage,pageSize,filterValue,vagueValue,content)" placeholder="报价主题" style="width: 120px">
        <el-option v-for="group in vagueOptions" :key="group.value"
                   :label="group.label" :value="group.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage,pageSize,filterValue,vagueValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--新建报价单-->
    <div style="margin-top: 15px;overflow: hidden;">
      <el-col :span="12">
        <span>报价</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
        <el-button type="text" @click="dialogCopy = true">
          <el-button size="small" icon="el-icon-document-copy">复制报价单</el-button>
        </el-button>
      </el-col>
      <!--报价单dialog-->
      <el-dialog title="报价/预下单" :visible.sync="dialogFormVisible" @open="openDialog" @close="closeDialog" width="60%" style="color: #333333"  >
        <el-form :model="quotation" ref="quo" label-width="100px" :rules="rules">
          <el-divider><span class="font-14-bold"></span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="主题:" prop="quotationTheme">
                <el-input v-model="quotation.quotationTheme" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转成订单:">
                <el-radio-group v-model="quotation.quotationStatus">
                  <el-radio :label="1">可见</el-radio>
                  <el-radio :label="2">不可见</el-radio>
                  <el-radio :disabled="true" :label="3">转成订单</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
           <el-col>
              <el-form-item label="客户:" prop="customerByCustomerId.customerName">
                <el-input :disabled="true" v-model="quotation.customerByCustomerId.customerName" style="width: 91%"></el-input>
              </el-form-item>
             <div class="form-inline" v-show="isCustomer">
               <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 18%"></el-input>
               <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
               <el-popover placement="top" v-model="visible">
                 <div style="margin-bottom: 10px">
                   <span>查询条件:{{customerValue}}</span>
                   <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                 </div>
                 <ul class="cu-ul" v-if="customerList2 !== ''">
                   <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                 </ul>
                 <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                   <i class="el-icon-warning-outline"/>没有符合条件的客户！
                 </div>
               </el-popover>
               <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                 <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
               </el-tooltip>
             </div>
           </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="报价单号:">
                <el-input :disabled="true" v-model="quotation.quotationNo" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:">
                <el-select v-model="quotation.quotationClassify" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in lxOptions" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="日期:">
                <el-date-picker v-model="quotation.quotationDate" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报价:" prop="quotationPrice">
                <el-input v-model.number="quotation.quotationPrice" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="销售机会:" prop="opportunityByOppId">
               <el-select v-model="quotation.opportunityByOppId" value-key="oppId" placeholder="未选" style="width: 91%">
                 <el-option v-for="item in opportunityList" :key="item.oppId" :label="item.oppTheme" :value="item">
                 </el-option>
               </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="明细:" style="width: 92%">
                <el-row v-if="this.quotation.quotationId === 0" class="gz-style">
                  <div style="float: right">保存后方可编辑明细</div>
                </el-row>
                <el-row v-if="this.quotation.quotationId !== 0">
                  <el-row>
                    <el-col :span="4" :offset="16">
                      <span class="cursor" @click="openPro(quotation.quotationId)"><i class="el-icon-edit"></i>编辑明细</span>
                    </el-col>
                    <el-col :span="4">
                      <span class="cursor" @click="printPdf(quotation.quotationId)"><i class="el-icon-printer"></i>打印单据</span>
                    </el-col>
                  </el-row>
                  <div class="detail">
                    <el-table :data="detailList" style="width: 100%" border show-summary>
                      <el-table-column prop="productByProductId.productName" label="产品名" >
                      </el-table-column>
                      <el-table-column prop="productByProductId.productModel" label="型号" >
                      </el-table-column>
                      <el-table-column prop="productDetailCount" label="数量" >
                      </el-table-column>
                      <el-table-column prop="productDetailPrice" label="单价" >
                        <template slot-scope="scope">
                          ￥{{scope.row.productDetailPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailMoney" label="金额" >
                        <template slot-scope="scope">
                          ￥{{ (scope.row.productDetailMoney = scope.row.productDetailPrice *scope.row.productDetailCount)}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailRemarks" label="备注" >
                      </el-table-column>
                    </el-table>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item  label="接受人:" prop="quotationContactName">
                <el-select v-model="quotation.quotationContactName"  placeholder="未选" style="width: 91%">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="报价人:" prop="employeeByEmpId.empName">
                <el-input :disabled="true" v-model="quotation.employeeByEmpId.empName" style="width: 91%">
                  <el-button @click="openEmpDialog" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="交付说明:">
                <el-input v-model="quotation.quotationDelivery" style="width: 91%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="付款方式:">
                <el-input v-model="quotation.quotationPayment" style="width: 91%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="包装运输说明:">
                <el-input v-model="quotation.quotationPackage" style="width: 91%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注:">
                <el-input v-model="quotation.quotationRemarks" style="width: 91%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审批状态:" style="width:91%">
                <div v-if="this.quotation.quotationId !== 0">
                  <div v-if="this.quotation.quotationAppStatus === 0">
                    <span>待申请</span>
                    <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
                      <i class="el-icon-more font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.quotation.quotationAppStatus === 1">
                    <span>待审批</span>
                    <el-tooltip class="item" effect="dark" content="待审批" placement="bottom">
                      <i class="el-icon-s-opportunity font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.quotation.quotationAppStatus === 2">
                    <span>同意</span>
                    <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
                      <i class="el-icon-circle-check font-18"></i>
                    </el-tooltip>
                    <span>审批人：{{quotation.employeeByAppEmpId.empName}}</span>
                  </div>
                  <div v-if="this.quotation.quotationAppStatus === 3">
                    <span>否决</span>
                    <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
                      <i class="el-icon-circle-close font-18"></i>
                    </el-tooltip>
                    <span>审批人：{{quotation.employeeByAppEmpId.empName}}</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审批记录:" style="width:91%">
                <el-row></el-row>
                <el-row :key="index" v-for="(app,index) in approvalRecordList">
                  <div class="border-bo" >
                    <div class="font-13-bold">
                      <span>申请：</span>
                      <span class="margin-r-3">{{app.employeeByApplicantEmpId.empName}}<i class="el-icon-right"/> boss用户</span>
                      <span>{{app.approvalRecordDate | formatDateJudge}}</span>
                    </div>
                    <div class="font-13" v-if="app.employeeByApprovalEmpId !== null">
                      <span class="margin-r-3"><i class="el-icon-minus"/>{{app.employeeByApprovalEmpId.empName}}</span>
                      <span class="margin-r-3">{{app.approvalRecordTime | formatDate}}</span>
                      <span class="margin-r-3">{{app.approvalRecordOper}}</span>
                      <span>备注：{{app.approvalRecordNote}}</span>
                    </div>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="addQuotation" type="primary">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog-->
        <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog员工-->
        <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
          <div>
            <el-collapse v-model="activeName">
            <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
            <ul class="emp-ul">
              <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                <span class="">{{emp.empName}}</span>
              </li>
            </ul>
            </el-collapse-item>
          </el-collapse>
          </div>
        </el-dialog>
      </el-dialog>
      <!--复制报价单dialog-->
      <el-dialog title="复制报价单" :visible.sync="dialogCopy"
                 @close="closeDialogCopy" width="60%" style="color: #333333"  >
        <el-form :model="copyForm" label-width="100px">
          <el-divider><span class="font-14-bold"></span></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="1.确定源报价单:" label-width="200px">
                <el-radio-group v-model="copyForm.copyIdType">
                  <el-radio :label="1">ID</el-radio>
                  <el-radio :label="2">报价单号</el-radio>
                </el-radio-group>
                <br/>
                <el-input v-model="copyForm.copyNo" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="2.复制到客户:" label-width="200px">
                <el-input :disabled="true" v-model="copyForm.customer.customerName" style="width: 79%"></el-input>
              </el-form-item>
              <div class="form-inline-copy" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 20%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="3.选择销售机会:" label-width="200px">
                <el-select v-model="copyForm.opportunityByOppId" value-key="oppId" placeholder="未选" style="width: 79%">
                  <el-option v-for="item in opportunityList" :key="item.oppId" :label="item.oppTheme" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="copyQuotationTips" type="primary">确认</el-button>
                <el-button @click="dialogCopy = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!--内层dialog-->
          <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body>
            <!--选择客户-->
            <el-table :data="customerList" style="width: 100%">
              <el-table-column prop="customerId" label="客户编号" >
              </el-table-column>
              <el-table-column prop="customerName" label="客户名" >
              </el-table-column>
              <el-table-column label="请选择" >
                <template slot-scope="scope">
                  <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top:10px">
              <el-col :span="16">
                <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                               :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
              </el-col>
            </el-row>
          </el-dialog>
        </el-form>
      </el-dialog>
    </div>
    <!--表格-->
    <el-table ref="multipleTable" :data="quotationList" tooltip-effect="dark" id="outTable"
              style="width: 100%" border :header-cell-style="rowClass" @selection-change="handleSelectionChange">
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="quotationId" label="ID" sortable width="60"></el-table-column>
      <el-table-column label="主题" >
        <template slot-scope="scope">
          <router-link :to="{path:'/quotationview',query: {quoId: scope.row.quotationId}}">
            <div style="color: #333333">
              <i class="el-icon-caret-right"></i>
              <span>{{scope.row.quotationTheme}}</span>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.quotationClassify === 1">{{lxOptions[0].label}}</span>
          <span v-if="scope.row.quotationClassify === 2">{{lxOptions[1].label}}</span>
          <span v-if="scope.row.quotationClassify === 3">{{lxOptions[2].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="quotationDate" label="时间" sortable width="100">
        <template slot-scope="scope">
          <span>{{scope.row.quotationDate | formatDateJudge}}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售机会">
        <template slot-scope="scope">
          <div style="color: #333333" v-if="scope.row.opportunityByOppId !== null">
            <span>{{scope.row.opportunityByOppId.oppTheme}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/opportview',query: {oppId: scope.row.opportunityByOppId.oppId}}">
                <span style="color: #333333">
                  <i class="el-icon-s-cooperation"></i>
                </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="客户">
        <template slot-scope="scope">
          <div style="color: #333333">
            <span>{{scope.row.customerByCustomerId.customerName}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/customerview',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                <span style="color: #333333">
                  <i class="el-icon-s-cooperation"></i>
                </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="quotationPrice" label="报价" sortable width="100">
        <template slot-scope="scope">
          <span>￥{{scope.row.quotationPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="quotationContactName" label="接受人" ></el-table-column>
      <el-table-column prop="employeeByEmpId.empName" label="报价人" width="100"></el-table-column>
      <el-table-column label="审批" width="60">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
            <span class="font-18" v-if="scope.row.quotationAppStatus === 0"><i class="el-icon-more"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="待审" placement="bottom">
            <span class="font-18" v-if="scope.row.quotationAppStatus === 1"><i class="el-icon-s-opportunity"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
            <span class="font-18" v-if="scope.row.quotationAppStatus === 2"><i class="el-icon-circle-check"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
            <span class="font-18" v-if="scope.row.quotationAppStatus === 3"><i class="el-icon-circle-close"></i></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="110px">
        <template slot-scope="scope">
          <div v-if="scope.row.quotationAppStatus !== 2">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <el-button size="mini" @click="handleEdit(scope.row)"
                         icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <el-button size="mini" @click="handleDelete(scope.row)"
                         icon="el-icon-delete" type="danger" circle></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="13">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <el-col :span="3">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="批量导出Excel格式数据" placement="bottom">
          <el-button @click="batchExportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-copy"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from "../assets/format";
  import XLSX from "xlsx";
  import FileSaver from "file-saver";
  export default {
  data () {
    return {
      emp:{},
      dialogFormVisible: false,
      dialogCopy:false,
      quotationList: [], // 报价集合分页
      customerList: [], // 员工客户集合
      contactList: [], // 客户联系人集合
      opportunityList: [],// 销售机会集合
      detailList: [], // 明细集合
      pageSize: 10, // 分页页大小
      pageSizes:[10,20,30],//页大小数组
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      cusPageSize: 5, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      quotation: {
        quotationId: 0,
        quotationTheme: '',
        quotationNo: '',
        quotationStatus: '',
        quotationClassify: '',
        quotationDate: '',
        quotationPrice: '',
        quotationDelivery: '',
        quotationPayment: '',
        quotationPackage: '',
        quotationRemarks: '',
        quotationContactName: '',
        quotationAppStatus: 0,
        opportunityByOppId: null,
        customerByCustomerId:{},
        employeeByEmpId:'',
        employeeByAppEmpId:null
      },
      approvalRecordList:[],// 审批记录集合
      isCustomer: true, // 客户搜索显示
      innerDialog: false,// 内层dialog客户
      innerDialogEmp: false,// 内层dialog员工
      activeName: [],
      deptList:[],
      customerValue:'',// 模糊查询客户查询值
      customerList2:[],// 模糊查询客户集合
      visible: false,// 模糊搜索ul显示
      content: '',// input内容
      copyForm:{
        copyIdType:1,
        copyNo:'',
        customer:'',
        opportunityByOppId:''
      },
      rules: {
        quotationTheme: [{
          required: true,
          message: '必须填',
          trigger: 'blur'
        }],
        opportunityByOppId : [
          { required: true, message: '请选择机会', trigger: 'change' }
        ],
       'customerByCustomerId.customerName': [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        'employeeByEmpId.empName': [
           { required: true, message: '请选择负责人', trigger: 'blur' }
         ],
        quotationPrice: [
          { required: true, message: '必须填'},
          { type: 'number', message: '必须为数字'}
        ]
      },
      mulSelection: [],
      lxOptions: [{
        value: 1,
        label: '证券报价'
      }, {
        value: 2,
        label: '投标报价'
      }, {
        value: 3,
        label: '产品报价'
      }],
      filterOptions: [{
        value: 0,
        label: '全部数据'
      }, {
        value: 1,
        label: '证券报价'
      }, {
        value: 2,
        label: '投标报价'
      }, {
        value: 3,
        label: '产品报价'
      }],
      filterValue: 0,
      vagueOptions: [{
        value: 1,
        label: '报价主题'
      }, {
        value: 2,
        label: '客户名称'
      }],
      vagueValue: 1,
      selectList:[]
    }
  },
  methods: {
    // 查询当前员工
    loginEmp() {
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {
        })
    },
    // 分页查询所有
    initData(currPage, pageSize,filter,vague,content) {
      this.$axios.get('http://localhost:8088/emp-quo-list', {
        params: {
          page: currPage,
          size: pageSize,
          filter:filter,
          vague:vague,
          content:content
        }
      })
        .then(v => {
          this.quotationList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {
        })
    },
    // 报价表格分页
    changePage(val) {
      this.initData(val, this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    //改变页大小
    changeSize(val){
      this.pageSize = val
      this.currPage = 1
      this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    // 查询客户所有机会
    opportunityData(cusId) {
      this.$axios.get('http://localhost:8088/cus-opp-list-all', {
        params: {
          cusId: cusId
        }
      })
        .then(v => {
          this.opportunityList = v.data
        })
        .catch(function (v) {
        })
    },
    // 查询联系人
    choiceContact(customerId) {
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId: customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {
        })
    },
    // 查询所有详单
    findDetail(quoId) {
      this.$axios.get('http://localhost:8088/quo-detail-list', {
        params: {
          quoId: quoId
        }
      })
        .then(v => {
          this.detailList = v.data
        })
        .catch(function (v) {
        })
    },
    // 查询报价单审批记录集合
    findAppRecord(quoId) {
      this.$axios.get('http://localhost:8088/app-record-quo-list', {
        params: {
          quoId: quoId
        }
      })
        .then(v => {
          this.approvalRecordList = v.data
        })
        .catch(function (v) {
        })
    },
    // 修改数据回显
    handleEdit(val) {
      this.dialogFormVisible = true
      this.quotation.quotationId = val.quotationId
      this.quotation.quotationTheme = val.quotationTheme
      this.quotation.quotationNo = val.quotationNo
      this.quotation.quotationStatus = val.quotationStatus
      this.quotation.quotationClassify = val.quotationClassify
      this.quotation.quotationDate = val.quotationDate
      this.quotation.quotationPrice = val.quotationPrice
      this.quotation.quotationDelivery = val.quotationDelivery
      this.quotation.quotationPayment = val.quotationPayment
      this.quotation.quotationPackage = val.quotationPackage
      this.quotation.quotationRemarks = val.quotationRemarks
      this.quotation.quotationContactName = val.quotationContactName
      this.quotation.employeeByEmpId = val.employeeByEmpId
      this.quotation.quotationAppStatus = val.quotationAppStatus
      this.quotation.employeeByAppEmpId = val.employeeByAppEmpId
      this.quotation.opportunityByOppId = val.opportunityByOppId
      this.quotation.customerByCustomerId = val.customerByCustomerId
      this.choiceContact(val.customerByCustomerId.customerId) // 根据客户名查询联系人集合
      this.opportunityData(val.customerByCustomerId.customerId)
      this.findDetail(val.quotationId)
      this.findAppRecord(val.quotationId)
      this.isCustomer = false
    },
    // 新增、修改
    addQuotation() {
      if(this.quotation.quotationId === 0){
        this.quotation.quotationNo = this.quoNo()
      }
      this.$refs.quo.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-quotation',
            {
              quotationId: this.quotation.quotationId,
              quotationTheme: this.quotation.quotationTheme,
              quotationNo: this.quotation.quotationNo,
              quotationStatus: this.quotation.quotationStatus,
              quotationClassify: this.quotation.quotationClassify,
              quotationDate: this.quotation.quotationDate,
              quotationPrice: this.quotation.quotationPrice,
              quotationDelivery: this.quotation.quotationDelivery,
              quotationPayment: this.quotation.quotationPayment,
              quotationPackage: this.quotation.quotationPackage,
              quotationRemarks: this.quotation.quotationRemarks,
              quotationContactName: this.quotation.quotationContactName,
              employeeByEmpId: this.quotation.employeeByEmpId,
              quotationAppStatus: this.quotation.quotationAppStatus,
              employeeByAppEmpId: this.quotation.employeeByAppEmpId,
              opportunity: this.quotation.opportunityByOppId,
              customerByCustomerId: this.quotation.customerByCustomerId,
              details: this.detailList
            })
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize,this.filterValue,this.vagueValue,this.content)
              // 2、关闭弹框
              this.dialogFormVisible = false
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 打开dialog事件
    openDialog() {
      if(this.quotation.quotationId === 0){
        this.quotation.employeeByEmpId = this.emp
        this.quotation.quotationDate = this.addDate()
        this.quotation.quotationStatus = 1
      }
    },
    // 关闭dialog事件
    closeDialog() {
      this.$refs.quo.resetFields()
      this.quotation = {
        quotationId: 0,
        quotationTheme: '',
        quotationNo: '',
        quotationStatus: '',
        quotationClassify: '',
        quotationDate: '',
        quotationPrice: '',
        quotationDelivery: '',
        quotationPayment: '',
        quotationPackage: '',
        quotationRemarks: '',
        quotationContactName: '',
        quotationAppStatus: 0,
        opportunityByOppId: null,
        customerByCustomerId: {},
        employeeByEmpId:'',
        employeeByAppEmpId:null
      }
      this.detailList = []
      this.approvalRecordList = []
      this.isCustomer = true
      this.contactList = []
      this.opportunityList = []
    },
    // 打开内层dialog
    innerVisible(cusCurrPage, cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.customerList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {
        })
      this.innerDialog = true
    },
    // 查询客户分页
    cusChangePage(val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer(val) {
      if (this.dialogFormVisible === true){
        this.quotation.customerByCustomerId = val
        this.quotation.quotationContactName = ''
        this.quotation.opportunityByOppId = ''
        this.choiceContact(val.customerId)
        this.opportunityData(val.customerId)
      }else if(this.dialogCopy === true){
        this.copyForm.customer = val
        this.copyForm.opportunityByOppId = ''
        this.opportunityData(val.customerId)
      }
      this.innerDialog = false;
    },
    // 模糊查询客户
    findCustomer() {
      if (this.customerValue !== '') {
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
          params: {
            customerName: this.customerValue
          }
        })
          .then(v => {
            this.customerList2 = v.data
          })
          .catch(function (v) {
          })
      } else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCustomer2(val) {
      if (this.dialogFormVisible === true){
        this.quotation.customerByCustomerId = val
        this.quotation.quotationContactName = ''
        this.quotation.opportunityByOppId = ''
        this.choiceContact(val.customerId)
        this.opportunityData(val.customerId)
        this.customerValue = ''
      }else if(this.dialogCopy === true){
        this.copyForm.customer = val
        this.copyForm.opportunityByOppId = ''
        this.opportunityData(val.customerId)
      }
      this.this.customerValue = ''
      this.visible = false
    },
    // 失去焦点关闭模糊搜索框
    cleanCustomer() {
      this.visible = false
      this.customerValue = ''
    },
    //查询部门员工
    findDeptList () {
      this.$axios.get('http://localhost:8088/dept-emp-list')
        .then(v => {
          this.deptList = v.data
          for(let i = 1;i <= this.deptList.length;i++){
            this.activeName.push(i)
          }
        })
        .catch(function (v) {})
    },
    //打开员工dialog
    openEmpDialog(){
      this.innerDialogEmp = true
      this.findDeptList()
    },
    // 选择员工
    choiceEmp(val) {
      this.quotation.employeeByEmpId = val
      this.innerDialogEmp = false;
    },
    //关闭员工diglog事件
    closeInnerDialogEmp(){
      this.activeName = []
    },
    // 点击编辑详单跳转到报价视图
    openPro(quoId) {
      this.$router.push({path: '/quotationview', query: {quoId: quoId}});
    },
    //关闭复制报价单dialog事件
    closeDialogCopy(){
      this.copyForm = {
        copyIdType:1,
        copyNo:'',
        customer:'',
        opportunityByOppId:''
      }
      this.quotation = {
        quotationId: 0,
        quotationTheme: '',
        quotationNo: '',
        quotationStatus: '',
        quotationClassify: '',
        quotationDate: '',
        quotationPrice: '',
        quotationDelivery: '',
        quotationPayment: '',
        quotationPackage: '',
        quotationRemarks: '',
        quotationContactName: '',
        quotationAppStatus: 0,
        opportunityByOppId: null,
        customerByCustomerId: {},
        employeeByEmpId:'',
        employeeByAppEmpId:null
      }
      this.detailList = []
      this.opportunityList = []
    },
    // 复制报价单判断
    copyQuotationTips () {
      if (this.copyForm.customer === ''){
        this.$message({
          message: '客户不能为空',
        });
      }else if (this.copyForm.copyNo === '') {
        this.$message({
          message: '报价单不能为空',
        })
      }else if (this.copyForm.opportunityByOppId === '') {
        this.$message({
          message: '销售机会不能为空',
        })
      }else if (this.copyForm.copyIdType === 1){
        if (/^[0-9]{1,20}$/.exec(this.copyForm.copyNo)){
          console.log(this.copyForm.opportunityByOppId)
          this.findQuotationById()
        }else {
          this.dialogCopy = false
          this.$message({
            message: 'id错误',
          })
        }
      }else if (this.copyForm.copyIdType === 2) {
        this.findQuotationByNo()
      }
    },
    //查询报价单根据ID
    findQuotationById(){
      this.$axios.get('http://localhost:8088/emp-quo-id', {
        params: {
          quoId: this.copyForm.copyNo
        }
      })
        .then(v => {
          if (v.data.length === 0){
            this.dialogCopy = false
            this.$message({
              message: '数据不存在',
            })
          }else {
            this.quotation = v.data
            this.findDetailByCopy(this.quotation.quotationId)
            this.quotation.quotationId = 0
            this.quotation.quotationStatus = 1
            this.quotation.quotationAppStatus = 0
            this.quotation.quotationDate = this.addDate()
            this.quotation.quotationContactName = null
            this.quotation.customerByCustomerId = this.copyForm.customer
            this.quotation.opportunityByOppId = this.copyForm.opportunityByOppId
            this.quotation.employeeByAppEmpId = null
            this.quotation.employeeByEmpId = this.emp
            this.quotation.quotationNo = this.quoNo()
          }
        })
        .catch(function (v) {
        })
    },
    //查询报价单根据报价单号
    findQuotationByNo(){
      this.$axios.get('http://localhost:8088/quo-no', {
        params: {
          quoNo: this.copyForm.copyNo
        }
      })
        .then(v => {
          if (v.data.length === 0){
            this.dialogCopy = false
            this.$message({
              message: '数据不存在',
            })
          }else {
            this.quotation = v.data
            this.findDetailByCopy(this.quotation.quotationId)
            this.quotation.quotationId = 0
            this.quotation.quotationStatus = 1
            this.quotation.quotationAppStatus = 0
            this.quotation.quotationDate = this.addDate()
            this.quotation.quotationContactName = null
            this.quotation.customerByCustomerId = this.copyForm.customer
            this.quotation.opportunityByOppId = this.copyForm.opportunityByOppId
            this.quotation.employeeByAppEmpId = null
            this.quotation.employeeByEmpId = this.emp
            this.quotation.quotationNo = this.quoNo()
          }
        })
        .catch(function (v) {
        })
    },
    // 复制报价查询所有详单
    findDetailByCopy(quoId) {
      this.$axios.get('http://localhost:8088/quo-detail-list', {
        params: {
          quoId: quoId
        }
      })
        .then(v => {
          this.detailList = v.data
          this.copyQuotation()
        })
        .catch(function (v) {
        })
    },
    //复制报价
    copyQuotation(){
      this.$axios.post('http://localhost:8088/save-quotation',
        {
          quotationId: this.quotation.quotationId,
          quotationTheme: this.quotation.quotationTheme,
          quotationNo: this.quotation.quotationNo,
          quotationStatus: this.quotation.quotationStatus,
          quotationClassify: this.quotation.quotationClassify,
          quotationDate: this.quotation.quotationDate,
          quotationPrice: this.quotation.quotationPrice,
          quotationDelivery: this.quotation.quotationDelivery,
          quotationPayment: this.quotation.quotationPayment,
          quotationPackage: this.quotation.quotationPackage,
          quotationRemarks: this.quotation.quotationRemarks,
          quotationContactName: this.quotation.quotationContactName,
          employeeByEmpId: this.quotation.employeeByEmpId,
          quotationAppStatus: this.quotation.quotationAppStatus,
          employeeByAppEmpId: this.quotation.employeeByAppEmpId,
          opportunity: this.quotation.opportunityByOppId,
          customerByCustomerId: this.quotation.customerByCustomerId,
          details: this.detailList
        })
        .then(v => {
          // 1、刷新数据
          this.initData(this.currPage, this.pageSize,this.filterValue,this.vagueValue,this.content)
          this.dialogCopy = false
          this.$message({
            message: '复制成功',
            type: 'success'
          });
        })
        .catch(function (v) {
        })
    },
    // 删除提示
    handleDelete(val) {
      this.$confirm('此操作将永久删除该报价, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteQuo(val.quotationId)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除提示
    handleDeleteMany() {
      this.$confirm('此操作将永久删除勾选报价, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取批量删除对象集合
    handleSelectionChange(val) {
      this.mulSelection = val
    },
    // 删除axios
    deleteQuo(quoId) {
      this.$axios.post('http://localhost:8088/delete-quotation', this.qs.stringify({quoId: quoId}))
        .then(v => {
          // 1、刷新数据
          this.initData(this.currPage, this.pageSize,this.filterValue,this.vagueValue,this.content)
        })
        .catch(function (v) {
        })
    },
    // 删除所有
    deleteAll() {
      this.mulSelection.forEach(row => {
        if(row.quotationAppStatus === 2){
          this.$refs.multipleTable.clearSelection();
          this.$message({
            type: 'info',
            message: 'ID为'+row.quotationId+'的数据已审核通过，无法删除'
          })
        }else {
          this.deleteQuo(row.quotationId)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }

      })
    },
    // 导出PDF
    printPdf(val){
      this.$router.push({path: '/printquotation', query: {quoId: val}});
    },
    // 报价单号
    quoNo() {
      var quoNo = "";
      for (var i = 0; i < 4; i++) //j位随机数，用以加在时间戳后面。
      {
        quoNo += Math.floor(Math.random() * 10);
      }
      quoNo = 'BJ' + this.addDateNum() + quoNo;
      return quoNo;
    },
    // 获取当前日期20200206
    addDateNum () {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year  + month  + strDate;
      return currentdate;
    },
    // 获取当前日期
    addDate () {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
      var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
      var currentdate = date.getFullYear() + seperator1  + month  + seperator1  + strDate
      return currentdate
    },
    // pdf打印
    handleWindowPrint (ele, fileName) {
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //导出excel
    exportExcel () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "报价导出.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //批量导出excel batchList
    batchExportExcel(){
      this.mulSelection.forEach((item,i)=>{
        this.$set(item,'quotationId',item.quotationId);
        this.$set(item,'quotationTheme',item.quotationTheme);
        if (item.quotationClassify !== null){
          this.$set(item,'quotationClassify',this.lxOptions[item.quotationClassify - 1].label);
        }
        this.$set(item,'quotationDate',item.quotationDate)
        if (item.opportunityByOppId !== null){
          this.$set(item,'oppTheme',item.opportunityByOppId.oppTheme);
        }
        this.$set(item,'customerName',item.customerByCustomerId.customerName);
        this.$set(item,'quotationPrice','￥'+item.quotationPrice);
        this.$set(item,'quotationContactName',item.quotationContactName);
        this.$set(item,'empName',item.employeeByEmpId.empName);
        if (item.quotationAppStatus === 0){
          this.$set(item,'quotationAppStatus','待申请');
        }else if(item.quotationAppStatus === 1){
          this.$set(item,'quotationAppStatus','待审批');
        }else if(item.quotationAppStatus === 2){
          this.$set(item,'quotationAppStatus','同意');
        }else if(item.quotationAppStatus === 3){
          this.$set(item,'quotationAppStatus','否决');
        }
        this.selectList.splice(i,0,item);
      })
      //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../js/Export2Excel');
        const tHeader = ['ID','主题','分类','时间','销售机会','客户','报价', '接收人', '报价人','审批','备注'];
        const filterVal = ['quotationId','quotationTheme','quotationClassify','quotationDate','oppTheme','customerName','quotationPrice', 'quotationContactName','empName',
          'quotationAppStatus'];
        const list = this.selectList;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '报价批量导出');
      })
      this.initData(this.currPage, this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 表头靠左样式
    rowClass(){
      return "text-align:left"
    }
  },
  created() {
    this.loginEmp()
    this.initData(this.currPage, this.pageSize,this.filterValue,this.vagueValue,this.content)
  },
    filters: {
      formatDate: function(time) {
        if(time!=null&&time!="")
        {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
        }else{
          return "";
        }
      },
      formatDateJudge: function(time) {
        if(time != null && time != "")
        {
          let date = new Date(time);
          let currentDate = new Date()
          let seperator1 = "-";
          let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
          let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
          let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
          let todayTime = new Date(today)
          let yesterday = todayTime.setDate(todayTime.getDate() - 1)
          let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
          let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
          let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
          todayTime.setDate(todayTime.getDate() - 2)
          if (date.getTime() === todayTime.getTime()){
            return '今天'
          }else if (date.getTime() ===  yesterday){
            return '昨天'
          }else if (date.getTime() ===  beforeYesterday){
            return '前天'
          }else if (date.getTime() ===  tomorrow){
            return '明天'
          }else if (date.getTime() ===  afterTomorrow){
            return '后天'
          }else {
            return time
          }
        }else{
          return "";
        }
      }
    }
}
</script>

<style>

</style>

